{% extends "base.html" %}

{% block title %}用户列表 - Django管理平台{% endblock %}
{% block description %}管理平台用户列表，支持搜索、添加、编辑和删除用户{% endblock %}

{% block extra_css %}
<style>
    .user-list-container {
        animation: fadeIn 0.3s ease-out;
    }
    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .table {
        width: 100%;
        border-collapse: collapse;
    }
    .table th,
    .table td {
        padding: 0.75rem 1rem;
        text-align: left;
        border-bottom: 1px solid #e5e7eb;
    }
    .table th {
        background-color: #f9fafb;
        font-weight: 500;
        color: #374151;
        white-space: nowrap;
    }
    .table tr:hover {
        background-color: #f9fafb;
    }
    .avatar {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: rgba(59, 130, 246, 0.1);
        color: #3b82f6;
        font-weight: 500;
        font-size: 0.875rem;
    }
    .search-input {
        padding: 0.5rem 1rem;
        border: 1px solid #e5e7eb;
        border-radius: 0.375rem;
        width: 100%;
        font-size: 0.875rem;
        transition: all 0.2s ease;
    }
    .search-input:focus {
        outline: none;
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    }
    .btn {
        padding: 0.5rem 1rem;
        border-radius: 0.375rem;
        font-size: 0.875rem;
        font-weight: 500;
        transition: all 0.2s ease;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .btn-primary {
        background-color: #3b82f6;
        color: white;
        border: none;
    }
    .btn-primary:hover {
        background-color: #2563eb;
        transform: translateY(-1px);
    }
    .btn-outline {
        background-color: white;
        color: #374151;
        border: 1px solid #e5e7eb;
    }
    .btn-outline:hover {
        background-color: #f9fafb;
        border-color: #d1d5db;
    }
    .btn-danger {
        background-color: #ef4444;
        color: white;
        border: none;
    }
    .btn-danger:hover {
        background-color: #dc2626;
    }
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
    .tag {
        display: inline-flex;
        align-items: center;
        padding: 0.25rem 0.5rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
    }
    .tag-success {
        background-color: #d1fae5;
        color: #065f46;
    }
    .tag-danger {
        background-color: #fee2e2;
        color: #991b1b;
    }
    .alert {
        padding: 1rem;
        border-radius: 0.375rem;
        margin-bottom: 1rem;
    }
    .alert-success {
        background-color: #d1fae5;
        color: #065f46;
        border: 1px solid #a7f3d0;
    }
    .alert-error {
        background-color: #fee2e2;
        color: #991b1b;
        border: 1px solid #fecaca;
    }
    .card {
        background-color: white;
        border-radius: 0.5rem;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
        margin-bottom: 1.5rem;
    }
    .text-text-primary {
        color: #111827;
    }
    .text-text-secondary {
        color: #4b5563;
    }
    .text-text-tertiary {
        color: #9ca3af;
    }
    .text-primary {
        color: #3b82f6;
    }
    .text-danger {
        color: #ef4444;
    }
    .transition-colors {
        transition-property: background-color, border-color, color, fill, stroke;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        transition-duration: 150ms;
    }
    .hover\:bg-gray-50:hover {
        background-color: #f9fafb;
    }
    .p-4 {
        padding: 1rem;
    }
    .p-5 {
        padding: 1.25rem;
    }
    .mb-6 {
        margin-bottom: 1.5rem;
    }
    .mt-4 {
        margin-top: 1rem;
    }
    .flex {
        display: flex;
    }
    .flex-col {
        flex-direction: column;
    }
    .md\:flex-row {
        flex-direction: row;
    }
    .md\:items-center {
        align-items: center;
    }
    .md\:justify-between {
        justify-content: space-between;
    }
    .gap-2 {
        gap: 0.5rem;
    }
    .gap-3 {
        gap: 0.75rem;
    }
    .gap-4 {
        gap: 1rem;
    }
    .gap-10 {
        gap: 2.5rem;
    }
    .items-center {
        align-items: center;
    }
    .justify-center {
        justify-content: center;
    }
    .justify-end {
        justify-content: flex-end;
    }
    .text-sm {
        font-size: 0.875rem;
    }
    .text-2xl {
        font-size: 1.5rem;
    }
    .font-bold {
        font-weight: 700;
    }
    .font-medium {
        font-weight: 500;
    }
    .whitespace-nowrap {
        white-space: nowrap;
    }
    .overflow-x-auto {
        overflow-x: auto;
    }
    .bg-gray-50 {
        background-color: #f9fafb;
    }
    .border-t {
        border-top: 1px solid #e5e7eb;
    }
    .opacity-50 {
        opacity: 0.5;
    }
    .cursor-not-allowed {
        cursor: not-allowed;
    }
    .flex-grow {
        flex-grow: 1;
    }
    .max-w-md {
        max-width: 28rem;
    }
    .relative {
        position: relative;
    }
    .inset-y-0 {
        top: 0;
        bottom: 0;
    }
    .left-0 {
        left: 0;
    }
    .pl-3 {
        padding-left: 0.75rem;
    }
    .pl-10 {
        padding-left: 2.5rem;
    }
    /* 复选框样式 */
    .checkbox-custom {
        display: flex;
        align-items: center;
        cursor: pointer;
        font-size: 0.875rem;
    }
    .checkbox-custom input[type="checkbox"] {
        margin-right: 0.5rem;
        cursor: pointer;
    }
    /* 批量操作工具栏 */
    .batch-actions {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0.5rem 0;
    }
    /* 响应式表格 */
    @media (max-width: 768px) {
        .table {
            display: block;
            overflow-x: auto;
        }
        .table-wrapper {
            overflow-x: auto;
        }
        .btn {
            font-size: 0.75rem;
            padding: 0.375rem 0.75rem;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div class="user-list-container">
        <!-- 页面标题和面包屑 -->
        <div class="mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
                <div>
                    <div class="flex items-center text-sm text-text-tertiary mb-1">
                        <a href="/" class="hover:text-primary">首页</a>
                        <span class="mx-2">/</span>
                        <span>用户管理</span>
                    </div>
                    <h2 class="text-2xl font-bold">用户列表</h2>
                </div>
                <div class="flex gap-3">
                    <a href="/" class="btn btn-outline" data-toggle="tooltip" title="返回首页">
                        <i class="fas fa-arrow-left mr-2"></i>返回首页
                    </a>
                </div>
            </div>
        </div>
        
        <!-- 消息提示 -->
        {% if messages %}
            {% for message in messages %}
                <div class="alert alert-{{ message.tags }}" role="alert">
                    <div class="flex items-center">
                        {% if message.tags == 'success' %}
                            <i class="fas fa-check-circle mr-2"></i>
                        {% elif message.tags == 'error' %}
                            <i class="fas fa-exclamation-circle mr-2"></i>
                        {% endif %}
                        {{ message }}
                    </div>
                </div>
            {% endfor %}
        {% endif %}
        
        <!-- 搜索和新增按钮 -->
        <div class="card mb-6">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between gap-4 p-5">
                <form method="get" class="search-form" style="display: flex; width: 100%; gap: 10px; align-items: center;">
                    <div class="relative flex-grow max-w-md">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3">
                            <i class="fas fa-search text-text-tertiary"></i>
                        </span>
                        <input type="text" name="search" class="search-input pl-10" placeholder="搜索用户名或邮箱" value="{{ search_query }}" data-input="search">
                    </div>
                    <button type="submit" class="btn btn-primary search-button">
                        <i class="fas fa-search mr-1"></i>搜索
                    </button>
                </form>
                <a href="{% url 'accounts:user_create' %}" class="btn btn-primary whitespace-nowrap add-user-button">
                        <i class="fas fa-plus mr-2"></i>新增用户
                    </a>
            </div>
        </div>
        
        <!-- 批量操作工具栏 -->
        <div class="mb-4 flex items-center justify-between">
            <div class="batch-actions">
                <button class="btn btn-outline btn-sm batch-delete-button" disabled>
                    <i class="fas fa-trash-alt mr-1"></i>批量删除
                </button>
                <button class="btn btn-outline btn-sm">
                    <i class="fas fa-download mr-1"></i>导出
                </button>
                {% if search_query %}
                    <a href="{% url 'accounts:user_list' %}" class="btn btn-outline btn-sm">
                        <i class="fas fa-times mr-1"></i>清除搜索
                    </a>
                {% endif %}
            </div>
            <div class="text-sm text-text-tertiary">
                共 <span class="font-medium text-primary">{{ users|length }}</span> 条记录
            </div>
        </div>
        
        <!-- 用户列表表格 -->
        <div class="card">
            <div class="table-wrapper overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th class="w-10">
                                <div class="checkbox-custom">
                                    <input type="checkbox" id="select-all" class="select-all-checkbox">
                                    <label for="select-all"></label>
                                </div>
                            </th>
                            <th data-sortable="true" class="sortable-header cursor-pointer">
                                <div class="flex items-center">
                                    ID
                                    <i class="fas fa-sort ml-1 text-text-tertiary"></i>
                                </div>
                            </th>
                            <th data-sortable="true" class="sortable-header cursor-pointer">
                                <div class="flex items-center">
                                    用户名
                                    <i class="fas fa-sort ml-1 text-text-tertiary"></i>
                                </div>
                            </th>
                            <th>邮箱</th>
                            <th data-sortable="true" class="sortable-header cursor-pointer">
                                <div class="flex items-center">
                                    创建时间
                                    <i class="fas fa-sort ml-1 text-text-tertiary"></i>
                                </div>
                            </th>
                            <th>最后登录</th>
                            <th>状态</th>
                            <th class="text-right">操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for user in users %}<tr class="hover:bg-gray-50 transition-colors" data-user-id="{{ user.id }}">
                            <td>
                                <div class="checkbox-custom">
                                    <input type="checkbox" class="user-checkbox" value="{{ user.id }}">
                                    <label for="user-{{ user.id }}"></label>
                                </div>
                            </td>
                            <td>{{ user.id }}</td>
                            <td>
                                <div class="flex items-center gap-2">
                                    <div class="avatar">
                                        {{ user.username|slice:':2' }}
                                    </div>
                                    <span>{{ user.username }}</span>
                                </div>
                            </td>
                            <td>
                                <a href="mailto:{{ user.email }}" class="text-primary hover:underline">
                                    {{ user.email }}
                                </a>
                            </td>
                            <td>{{ user.date_joined|date:"Y-m-d H:i" }}</td>
                            <td>
                                {% if user.last_login %}
                                    {{ user.last_login|date:"Y-m-d H:i" }}
                                {% else %}
                                    <span class="text-text-tertiary">从未登录</span>
                                {% endif %}
                            </td>
                            <td>
                                {% if user.is_active %}
                                    <span class="tag tag-success">
                                        <i class="fas fa-check-circle mr-1"></i>活跃
                                    </span>
                                {% else %}
                                    <span class="tag tag-danger">
                                        <i class="fas fa-times-circle mr-1"></i>禁用
                                    </span>
                                {% endif %}
                            </td>
                            <td class="text-right">
                                <div class="flex gap-2 justify-end">
                                    <a href="{% url 'accounts:user_update' user.id %}" class="btn btn-primary btn-sm edit-user-button" data-user-id="{{ user.id }}">
                                        <i class="fas fa-edit mr-1"></i>编辑
                                    </a>
                                    <a href="{% url 'accounts:user_delete' user.id %}" class="btn btn-danger btn-sm delete-user-button" data-user-id="{{ user.id }}" data-username="{{ user.username }}">
                                        <i class="fas fa-trash-alt mr-1"></i>删除
                                    </a>
                                </div>
                            </td>
                        </tr>{% endfor %}
                    </tbody>
                </table>
            </div>
            
            <!-- 分页 -->
            {% if is_paginated %}
            <div class="pagination mt-4 p-4 bg-gray-50 border-t">
                <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
                    <div class="text-text-secondary text-sm">
                        显示第 {{ page_obj.start_index }}-{{ page_obj.end_index }} 条，共 {{ page_obj.paginator.count }} 条记录
                    </div>
                    <div class="flex gap-2">
                        {% if page_obj.has_previous %}
                            <a href="?page={{ page_obj.previous_page_number }}&search={{ search_query }}" class="btn btn-outline btn-sm page-button">
                                <i class="fas fa-chevron-left mr-1"></i>上一页
                            </a>
                        {% else %}
                            <button class="btn btn-outline btn-sm opacity-50 cursor-not-allowed">
                                <i class="fas fa-chevron-left mr-1"></i>上一页
                            </button>
                        {% endif %}
                        
                        <span class="flex items-center px-3 py-1 border border-border rounded">
                            第 {{ page_obj.number }} / {{ page_obj.paginator.num_pages }} 页
                        </span>
                        
                        {% if page_obj.has_next %}
                            <a href="?page={{ page_obj.next_page_number }}&search={{ search_query }}" class="btn btn-outline btn-sm page-button">
                                下一页<i class="fas fa-chevron-right ml-1"></i>
                            </a>
                        {% else %}
                            <button class="btn btn-outline btn-sm opacity-50 cursor-not-allowed">
                                下一页<i class="fas fa-chevron-right ml-1"></i>
                            </button>
                        {% endif %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 搜索表单提交处理
        const searchForm = document.querySelector('.search-form');
        const searchInput = document.querySelector('input[name="search"]');
        const searchButton = document.querySelector('.search-button');
        
        if (searchForm && searchInput) {
            searchForm.addEventListener('submit', function(e) {
                e.preventDefault();
                const query = searchInput.value.trim();
                if (query) {
                    this.submit();
                }
            });
            
            // 回车键搜索
            searchInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    searchForm.dispatchEvent(new Event('submit'));
                }
            });
        }
        
        // 全选/取消全选功能
        const selectAllCheckbox = document.querySelector('.select-all-checkbox');
        const userCheckboxes = document.querySelectorAll('.user-checkbox');
        const batchDeleteButton = document.querySelector('.batch-delete-button');
        
        if (selectAllCheckbox && userCheckboxes.length > 0) {
            selectAllCheckbox.addEventListener('change', function() {
                const isChecked = this.checked;
                userCheckboxes.forEach(checkbox => {
                    checkbox.checked = isChecked;
                });
                updateBatchDeleteButton();
            });
            
            userCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    updateSelectAllCheckbox();
                    updateBatchDeleteButton();
                });
            });
            
            function updateSelectAllCheckbox() {
                const allChecked = Array.from(userCheckboxes).every(checkbox => checkbox.checked);
                selectAllCheckbox.checked = allChecked;
            }
            
            function updateBatchDeleteButton() {
                const anyChecked = Array.from(userCheckboxes).some(checkbox => checkbox.checked);
                batchDeleteButton.disabled = !anyChecked;
                if (anyChecked) {
                    batchDeleteButton.classList.remove('opacity-50', 'cursor-not-allowed');
                } else {
                    batchDeleteButton.classList.add('opacity-50', 'cursor-not-allowed');
                }
            }
        }
        
        // 批量删除功能
        if (batchDeleteButton) {
            batchDeleteButton.addEventListener('click', function() {
                const selectedIds = Array.from(userCheckboxes)
                    .filter(checkbox => checkbox.checked)
                    .map(checkbox => checkbox.value);
                
                if (selectedIds.length > 0) {
                    if (confirm(`确定要删除选中的 ${selectedIds.length} 个用户吗？此操作不可撤销。`)) {
                        // 这里可以实现批量删除的AJAX请求
                        // 由于Django视图不支持批量删除，我们这里只做提示
                        alert('批量删除功能即将实现');
                    }
                }
            });
        }
        
        // 单个删除确认
        const deleteButtons = document.querySelectorAll('.delete-user-button');
        deleteButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                const userId = this.getAttribute('data-user-id');
                const username = this.getAttribute('data-username');
                
                if (!confirm(`确定要删除用户 ${username} 吗？此操作不可撤销。`)) {
                    e.preventDefault();
                }
            });
        });
        
        // 表格行悬停效果增强
        const tableRows = document.querySelectorAll('tbody tr');
        tableRows.forEach(row => {
            row.addEventListener('mouseenter', function() {
                this.style.transform = 'scale(1.005)';
                this.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.05)';
                this.style.transition = 'all 0.2s ease';
            });
            
            row.addEventListener('mouseleave', function() {
                this.style.transform = 'scale(1)';
                this.style.boxShadow = 'none';
            });
        });
        
        // 按钮悬停效果增强
        const allButtons = document.querySelectorAll('.btn');
        allButtons.forEach(button => {
            if (!button.classList.contains('cursor-not-allowed')) {
                button.addEventListener('mouseenter', function() {
                    this.style.transform = 'translateY(-1px)';
                    this.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
                });
                
                button.addEventListener('mouseleave', function() {
                    this.style.transform = 'translateY(0)';
                    this.style.boxShadow = 'none';
                });
                
                button.addEventListener('mousedown', function() {
                    this.style.transform = 'translateY(0)';
                });
            }
        });
        
        // 表格排序功能（模拟）
        const sortableHeaders = document.querySelectorAll('.sortable-header');
        sortableHeaders.forEach(header => {
            header.addEventListener('click', function() {
                const sortIcon = this.querySelector('i');
                
                // 重置其他排序图标
                document.querySelectorAll('.sortable-header i').forEach(icon => {
                    if (icon !== sortIcon) {
                        icon.className = 'fas fa-sort ml-1 text-text-tertiary';
                    }
                });
                
                // 切换排序方向
                if (sortIcon.classList.contains('fa-sort')) {
                    sortIcon.className = 'fas fa-sort-up ml-1 text-primary';
                    // 这里可以添加排序逻辑
                } else if (sortIcon.classList.contains('fa-sort-up')) {
                    sortIcon.className = 'fas fa-sort-down ml-1 text-primary';
                    // 这里可以添加排序逻辑
                } else {
                    sortIcon.className = 'fas fa-sort ml-1 text-text-tertiary';
                    // 这里可以添加重置排序逻辑
                }
            });
        });
        
        // 响应式调整
        function adjustForResponsive() {
            const isMobile = window.innerWidth < 768;
            const actionButtons = document.querySelectorAll('.edit-user-button, .delete-user-button');
            
            if (isMobile) {
                actionButtons.forEach(button => {
                    const icon = button.querySelector('i');
                    const text = button.textContent.replace(/^\s*\S+\s*(.*?)\s*$/, '$1');
                    button.innerHTML = `<i class="fas ${icon.className.split(' ')[1]} mr-0"></i>`;
                    button.setAttribute('title', text);
                });
            } else {
                // 恢复按钮文本（实际项目中应该存储原始文本）
                document.querySelectorAll('.edit-user-button').forEach(button => {
                    if (button.innerHTML.trim().startsWith('<i')) {
                        button.innerHTML = '<i class="fas fa-edit mr-1"></i>编辑';
                    }
                });
                document.querySelectorAll('.delete-user-button').forEach(button => {
                    if (button.innerHTML.trim().startsWith('<i')) {
                        button.innerHTML = '<i class="fas fa-trash-alt mr-1"></i>删除';
                    }
                });
            }
        }
        
        // 初始化响应式调整
        adjustForResponsive();
        
        // 监听窗口大小变化
        window.addEventListener('resize', adjustForResponsive);
        
        // 滚动时导航栏样式变化
        const header = document.querySelector('header');
        if (header) {
            window.addEventListener('scroll', function() {
                if (window.scrollY > 10) {
                    header.classList.add('shadow-md');
                } else {
                    header.classList.remove('shadow-md');
                }
            });
        }
    });
</script>
{% endblock %}

</body>
</html>

